<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
const router = useRouter()

let show = ref(false)

// 反馈页面跳转
function feedbackClick() {
    router.push('/feedback')
}
// 进入详情跳转
function passedClick() {
    router.push({
        name: '/myolder',
        query: {
            name: 'a'
        }
    })
    // router.push('/myolder')

}

function psnClick() {
    router.push('/user/personal')
}

function changepwClick() {
    router.push('/user/newpsd')
}

function myhomeMsgClick() {
    router.push('/user/homemsg')
}

// 遮罩层点击事件
function conClick(res: any) {
    if (res == 'true') {
        router.push('/login/login')
    }
}
</script>

<template>
    <div class="box">
        <!-- 头部 背景 -->
        <div class="top">
            <van-icon class="user-head" name="user-circle-o" size="50"></van-icon>
        </div>

        <!-- 我的订单 -->
        <h1>我的订单</h1>
        <div class="container">
            <van-grid>
                <van-grid-item @click="$router.push('/user/myorder')" icon="passed" text="已支付" />
                <van-grid-item @click="$router.push('/user/myorder')" icon="paid" text="待支付" />
                <van-grid-item @click="$router.push('/user/myorder')" icon="refund-o" text="退款中" />
                <van-grid-item @click="$router.push('/user/myorder')" icon="apps-o" text="全部订单" />
            </van-grid>
        </div>

        <van-cell-group>
            <van-cell title="个人资料" icon="label-o" is-link arrow-direction="right" @click="psnClick" />
            <van-cell title="修改密码" icon="edit" is-link arrow-direction="right" @click="changepwClick" />
            <van-cell title="我的房源信息" icon="hotel-o" is-link arrow-direction="right" @click="myhomeMsgClick" />
            <van-cell @click="$router.push('/user/master')" title="成为房东" icon="wap-home-o" is-link
                arrow-direction="right" />
            <van-cell title="我的钱包" icon="paid" is-link arrow-direction="right" />
            <van-cell title="我的优惠券" icon="other-pay" is-link arrow-direction="right" />
            <van-cell title="消息中心" icon="chat-o" is-link arrow-direction="right" />
            <van-cell title="意见反馈" @click="$router.push('/user/feedback')" icon="question-o" is-link
                arrow-direction="right" />
        </van-cell-group>
        <!-- 遮罩层 -->
        <van-button type="primary" text="退出登录" @click="show = true" />
        <van-overlay :show="show" @click="show = false">
            <template #default>
                <div class="textBox">
                    <h2>温馨提示</h2>
                    <p>确定要退出?</p>
                    <button class="btn1" @click="conClick('false')">取消</button>
                    <button class="btn2" @click="conClick('true')">确定</button>
                </div>
            </template>
        </van-overlay>


    </div>
</template>

<style lang="scss" scoped>
.box {
    padding-bottom: 80px;
}

.top {
    position: relative;
    height: 150px;
    background-color: #e6fcf5;
    // background: url(../../assets/bg.jpg) no-repeat;
}

.user-head {
    position: absolute;
    display: flex;
    margin-top: 30px;
    margin-left: 160px;
}

h1 {
    font-size: 18px;
    margin-left: 20px;
    margin-top: 3px;
    border-color: #f8f9fa;
}

.container {
    height: 80px;
    background-color: #f8f9fa;
}

.box>.van-button {
    margin-top: 20px;
    width: 300px;
    margin-left: 38px;
}

.textBox {
    display: block;
    width: 200px;
    height: 120px;
    background-color: white;
    border-radius: 5px;
    margin-top: 350px;
    margin-left: 88px;
    overflow: hidden;
}

h2 {
    font-size: 15px;
    margin-left: 66px;
    margin-top: 20px;
}

.textBox>p {
    font-size: 12px;
    margin-left: 66px;
    margin-top: 15px;
}

.textBox>.btn1 {
    color: gray;
    margin-left: 50px;
    margin-top: 10px;
}

.textBox>.btn2 {
    color: blue;
    margin-left: 17px;
    margin-top: 10px;
}
</style>